<template>
<div class="showComponent">
    <el-row :gutter="24">
      <div @click="hiddenPanel(1)" class="group-title">
            <a class="toggleGroupItems">应用模板</a>
      </div>
      <el-col class="component" :span="8" v-for="(item , index) in componentList" :key="index" :class="{'selected':index == selectItem}">
          <div class="component-panel">
              <span class="icon-opt" @click="selectPanel(index)">
                  <i class="fas fa-check"></i>
              </span>
              <div class="icons" @click="detailPanel(item)">
                  <img :src="item.icons" />
              </div>
              <strong>
                  {{ item.name }}
              </strong>
              <br/>
              <span> {{ item.remark | ellipsis }}</span>
          </div>
      </el-col>
    </el-row>

    <el-dialog :title="detailTitle" :visible.sync="detailVisible" width="400px">
        <el-container>
            <el-carousel indicator-position="outside" height="500px" style="width:300px;margin:auto;" interval="10000">
                <el-carousel-item v-for="item in bannerPath" :key="item">
                    <img style="width:100%;" :src="item.imgPath" />
                </el-carousel-item>
            </el-carousel>
        </el-container>
        <div slot="footer" class="dialog-footer">
            <el-button @click="detailVisible = false">关闭</el-button>
        </div>
    </el-dialog>

</div>

</template>

<script>

import { getTemplate } from '@/api/api'

export default {
  filters: {
    ellipsis (value) {
      if (!value) return ''
      var len = 25 ;
      if (value.length > len) {
        return value.slice(0,len) + '...'
      }
      return value
    }
  },
  data() {
    return {
      selectItem: 100 ,
      detailVisible: false ,
      detailTitle: '',
      bannerPath: [
        {imgPath:'https://img-cdn-aliyun.dcloud.net.cn/stream/plugin_screens/6c7ae040-487f-11e9-807d-d3c1652a5630_1.jpg?v=1556459433'} ,
        {imgPath:'https://img-cdn-aliyun.dcloud.net.cn/stream/plugin_screens/6c7ae040-487f-11e9-807d-d3c1652a5630_2.jpg?v=1556630147'} ,
        {imgPath:'https://img-cdn-aliyun.dcloud.net.cn/stream/plugin_screens/e3f06640-5ebd-11e9-a266-f7698e9a5f18_1.png?v=1555512920'} ,
        {imgPath:'https://img-cdn-aliyun.dcloud.net.cn/stream/plugin_screens/e3f06640-5ebd-11e9-a266-f7698e9a5f18_0.png?v=1555512918'} ,
      ],
      componentList: []
    };
  },
  mounted(){
    this.initData() ;
  } ,
  methods: {
    initData(){
      getTemplate('mobile').then(response =>{
        this.componentList = response.templates ;
      });
    } ,
    handleChange(value) {
      console.log(value);
    } ,
    detailPanel(item) {
      console.log('item = ' + item);
      this.detailVisible = true ;
      this.detailTitle = item.name ;
    } ,
    selectPanel(index){
      if(index == this.selectItem){
        this.selectItem = -1 ;
      }else{
        this.selectItem = index ;
      }
    }
  }
};

</script>

<style scoped lang="scss">

.showComponent{
  width: 100% ;
  margin-bottom: 50px;

  .selected{
    .icon-opt {
      opacity: 1 !important ;
      i{
        opacity: 1 !important ;
      }
    }
  }

  .component {
    margin-bottom: 20px;

    .icon-opt {
      display: block;
      border: 2px solid #e4e4e4;
      height: 24px;
      width: 24px;
      margin-top: -12px;
      border-radius: 50%;
      cursor: pointer;
      float:right;
      color: #005bd4;
      text-align: center;
      opacity: 0.3 ;

      i{
        opacity: 0 ;
      }
    }
  }

  .selected{
    opacity: 1;
  }
  .group-title {
    font-weight: bold;
    margin-top: 8px;
    cursor: pointer;
    padding-bottom: 20px;
    padding-left: 12px;
    font-size: 13px;
  }
  .icons {
    position: absolute;
    left: 10px;
    margin-top: 5px;

    img {
      width: 60px;
      cursor: pointer;
      border-radius: 50% ;
    }
  }
  .component-panel {
    position: relative;
    display: block;
    text-decoration: none;
    padding: 16px;
    padding-left: 80px;
    color: rgba(34,34,34,0.8);
    background: #f7f9fa;
    font-size: 12px;
    border-radius: 4px;
    align-items: center;
    line-height: 24px;
    border: 2px solid #f7f9fa ;

    &:hover{
      box-shadow: 0 1px 4px 0 rgb(136 136 136 / 10%);
      transition: box-shadow .5s;
      .icon-opt {
        opacity: 1 ;
        &:hover{
          i{
            opacity: 1 ;
            transition: opacity .5s;
          }
        }
      }
    }
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-main{
  padding: 0px;
}

aside{
  background: #fff ;
  padding: 0px;
  padding-right: 10px;
}

.detail-label{
  font-size: 12px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

</style>



